<template>
    <div id="app">
        <MyHeader title='tabbar' />
        <div class="main">
            <component :is="comName"></component>
        </div>
        <MyTabbar :arr1='tabList' @yyds='f' />
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader'
    import GoodsList from './views/MyGoodsList'
    import GoodsSearch from './views/MyGoodsSearch'
    import UserInfo from './views/MyUserInfo'
    import MyTabbar from './components/MyTabbar'
    export default {
        data() {
            return {
                comName: 'GoodsList',
                tabList: [{
                        iconClass: "icon-weixin",
                        text: "商品列表",
                        componentName: "GoodsList"
                    },
                    {
                        iconClass: "icon-weixin",
                        text: "商品搜索",
                        componentName: "GoodsSearch"
                    },
                    {
                        iconClass: "icon-weixin",
                        text: "我的信息",
                        componentName: "UserInfo"
                    }
                ]
            }
        },
        components: {
            MyHeader,
            GoodsList,
            GoodsSearch,
            UserInfo,
            MyTabbar
        },
        methods: {
            f(cname) {
                this.comName = cname
            }
        }
    }
</script>

<style>
    .main {
        padding: 45px 0 50px;
    }
</style>